﻿<!DOCTYPE html>
<html>
<head>
    <title id="Description">This demo shows the default functionality of jqxNotification.
        Multiple instances of the same notification can be opened at the same time.</title>
    <meta name="keywords" content="jQuery notification, jQWidgets, jqxNotification, notification, unobtrusive notification" />
    <meta name="description" content="This demo shows the default functionality of jqxNotification. Multiple instances of the same notification can be opened at the same time." />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#messageNotification").jqxNotification({
                width: 250, position: "top-right", opacity: 0.9,
                autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, template: "info"
            });

            $("#timeNotification").jqxNotification({
                width: 250, position: "top-right", opacity: 0.9,
                autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, template: "time"
            });

            $("#openMessageNotification, #openTimeNotification").jqxButton({ width: 230, height: 30 });

            $("#openMessageNotification").click(function ()
            {
                $("#messageNotification").jqxNotification("open");
            });

            $("#openTimeNotification").click(function ()
            {
                var date = new Date();
                var minutes = date.getMinutes();
                if (minutes < 10)
                {
                    minutes = "0" + minutes;
                }
                var seconds = date.getSeconds();
                if (seconds < 10)
                {
                    seconds = "0" + seconds;
                }
                $("#currentTime").text(date.getHours() + ":" + minutes + ":" + seconds);
                $("#timeNotification").jqxNotification("open");
            });
        });
    </script>
</head>
<body>
    <!--Notifications-->
    <div id="messageNotification">
        <div>Welcome to our website.</div>
    </div>
    <div id="timeNotification">
        <div>Current time: <span id="currentTime" style="font-weight: bold;"></span>.</div>
    </div>
    <!--Layout-->
    <button id="openMessageNotification">Open a message notification</button>
    <br />
    <button id="openTimeNotification" style="margin-top: 10px;">Open a current time notification</button>
</body>
</html>
